Listboxes vs. Dropdown Lists列表框與下拉選單

列表框 (Listboxes)

列表框包含容器框、專案列表和標籤三部分，支援單選或多選功能。根據內容量可啟用滾動功能，部分列表框使用核取方塊表示多選。高階功能包括：

• 調整容器框的大小。

• 對專案重新排序。

• 在兩個列表框之間移動專案以完成選擇。

列表框的四種變體

單選列表框 (Single-select listbox)：使用者只能從互斥選項中選擇一個。

多選列表框 (Multiselect listbox)：使用者透過按住 Shift、Command 或 Control 鍵並點選專案，選擇或取消選擇多個專案。

帶核取方塊的多選列表框 (Multiselect listbox with checkboxes)：包含核取方塊，使多選功能更加直觀。

雙列表框多選 (Multiselect, dual listboxes)：包括兩個列表框，左側顯示可用選項，右側顯示已選選項。使用“新增”按鈕移動選項到右側，“移除”按鈕將選項移回左側。使用者還可以透過上下移動來重新排序專案。

下拉選單 (Dropdown Lists)

下拉選單包含四個主要部分：容器框、向下箭頭按鈕、專案列表和標籤。使用者點選箭頭按鈕可顯示互斥的專案列表，從中選擇一個。與列表框類似，下拉選單在展開時可能支援滾動功能。已選專案或預設值始終在容器框中可見，其餘專案在展開後顯示。選擇專案或點選框外區域會關閉下拉選單。

列表框與下拉選單的用途

節省螢幕空間：當有大量選項時，用列表框或下拉選單代替單獨的單選按鈕或核取方塊。

減少錯誤：透過限制使用者只能選擇列表中的選項，確保資料格式正確。

應用場景：列表框和下拉選單廣泛用於原生應用和網站。例如：

設計注意事項

可滾動的列表框和下拉選單需根據“引導法則 (Steering Law)”最佳化設計。此法則預測使用者在一個“隧道”內移動遊標所需時間，隧道越短越寬，導航越快越容易。因此：限制滾動專案數量。設計寬且短的元件，避免過長、過窄導致誤操作。

列表框 (Listboxes) 和下拉選單 (Dropdown Lists) 的優缺點總結

列表框的優點

1. 低互動成本：無需點選即可直接檢視所有選項。

2. 高選項可見性：可以同時顯示多個選項，提升決策效率。

3. 多列檢視支援：在寬度允許的情況下，能顯示更多選項。

4. 概覽和排序功能：特別適用於多選場景，使用者可清晰檢視已選內容並調整順序。

列表框的缺點

1. 佔用螢幕空間：相比下拉選單，列表框需要更多空間。

2. 操作不直觀：使用者可能不瞭解多選的操作方式，尤其是需要按鍵配合時。

3. 已選項可見性受限：對於內容較多的列表框，使用者可能難以同時檢視所有已選項。

下拉選單的優點

1. 節省螢幕空間：緊湊的設計減少空間佔用。

2. 支援預設值設定：能夠快速選定最優選項。

3. 弱化備選項：隱藏其他選項，適合場景中預設值滿足大多數需求的情況。

4. 使用者熟悉度高：使用者普遍熟悉的互動方式，適用於大多數應用場景。

下拉選單的缺點

1. 需點選操作：檢視選項前必須點選箭頭，增加了互動步驟。

2. 容易過載：當選項過多時，滾動會顯得笨拙。

3. 速度較慢：對於已知值（如生日），手動輸入比下拉操作更快。

4. 容易被忽視：設計過於緊湊時，使用者可能注意不到。

5. 誤操作易關閉：遊標偏離下拉框時，列表會意外關閉，需重新選擇。

選擇使用列表框或下拉選單的建議

1. 選項數量較少 (5個以下)：使用單選按鈕或核取方塊更直觀。

2. 選項數量適中 (5-15個)：螢幕空間有限時使用下拉選單；空間充裕時使用列表框。

3. 選項數量較多 (超過15個)：優先選擇能夠展示更多選項的列表框，儘量減少滾動。

4. 多選需求：選擇支援核取方塊的多選列表框。

5. 需要排序或概覽：使用支援重新排序的雙列表框。

6. 需要預設值：選擇下拉選單，尤其是在螢幕空間有限的情況下。